<template>
  <div>
    <el-container>
      <el-header>
        <el-row class="row-bg" justify="start">
          <el-col :span="12">
            <div class="grid-content bg-purple" text-align="left">
              <h2><p class="left">{{hotel_name}}</p></h2>
            </div>
          </el-col>
        </el-row>
        <el-row class="bg-purple-dark">
          <el-col :span="12">
            <p class="left">{{address}}</p>
          </el-col>
        </el-row>
        <el-row class="bg-purple">
          <el-col :span="12">
            <p class="left">{{description}}</p>
          </el-col>
          <el-col :span="2" class="bg-purple-light" :offset="7">
            <h2><p class="price">￥{{price}}起</p></h2>
          </el-col>
          <el-col :span="2" class="bg-purple-dark">
            <p class="right">
              <el-button type="primary">选择房间</el-button>
            </p>
          </el-col>
        </el-row>
        <el-row class="bg-purple-dark" justify="start">
          <el-col :span="12">
            <el-carousel :interval="3000" type="card" height="300px">
              <el-carousel-item v-for="preview_url in preview_urls" :key="preview_url">
                <el-image style="width: 500px; height: 300px" :src="preview_url" :fit="fill"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12" class="bg-purple-light">
            <el-row>
              <el-col :span="10" :offset="2" class="bg-purple"><h2><p class="rate">{{rate}}分 {{rateDescribe(rate)}}</p></h2></el-col>
              <el-col :span="12" class="bg-purple"></el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'RoomList',
  data: function () {
    return {
      hotel_name: '初见时光服务式公寓(成都太古里店)',
      address: '中国，四川，成都，锦江区，下东大街喜年广场B座3209室',
      description: '公寓位于成都繁华核心地段，拥有成都名片之称的太古里区域，公寓房间可俯瞰太古里全景，下楼即可到太古里、春熙路步行街、IFS，步行5分钟即到合江亭兰桂坊、王府井、太平洋、群光百货等，地理位置优越，交通便捷，出行方便。公寓楼下可尝遍成都美食，陈赫的贤合庄火锅、黄晓明的烧江南、廖健的谭鸭血火锅、小龙坎火锅、大龙燚火锅、冒椒火辣串串等网红店，三圣街小吃一条街，各种网红奶茶店让您轻松玩遍成都，吃遍成都美食，您还可以告知我们美食需求，让我们为您提供地道的建议。公寓是一家以创意时尚西雅概念为主题、全方面贴心服务为经营理念的现代化高有服务式公寓，还配有24小时贴心管家将尽全力满足您的一切需求。公寓采用现代时尚轻奢风设计理念，专属服务，客房内全面覆盖高速WiFi，房间可俯瞰太古里全景，视野开阔，我们拥有高品质纯客房，房间面积达50平米，24小时不间断可持续热水可以洗去一天的疲惫，房间采用星级高端品牌床垫斯林百兰，只为能让你在旅途中轻松入睡，房间都配有高级且丰富的洗浴用品，洗衣机、迷你小冰箱，高清投影，电吹风等设配。以悠然之态，尊享悠然旅途，以时尚之容，彰显独特魅力。',
      rate: 4.5,
      comment_num: 263,
      price: 119,
      lng: 109,
      lat: 35,
      preview_urls: [
        'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
        'http://pix3.agoda.net/hotelimages/129/1297/1297_18122813570070896489.jpg?s=312x',
        'http://pix4.agoda.net/hotelimages/129/1297/1297_17062019470053906921.jpg?s=312x',
        'http://pix1.agoda.net/hotelimages/129/1297/1297_17092809340056881861.jpg?s=312x',
        'http://pix2.agoda.net/hotelimages/129/1297/1297_17092809340056881862.jpg?s=312x'
      ]
    }
  },
  methods: {
    rateDescribe: function (rate) {
      if (rate >= 4.9) return '超级棒'
      else if (rate >= 4.8) return '棒'
      else if (rate >= 4.7) return '很好'
      else if (rate >= 4.6) return '好'
      else if (rate >= 4.5) return '不错'
      else return ''
    }
  }
}
</script>

<style scoped>
  p.price {
    color: #409EFF;
    text-align: right;
  }

  p.rate {
    color: #409EFF;
    text-align: left;
  }

  p.left {
    text-align: left
  }

  p.center {
    text-align: center
  }

  p.right {
    text-align: right
  }

  .el-row {
    margin-button: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
